<template>
  <div style="width: 1200px;margin: 0 auto">
    <h1>{{titleMessage}}</h1>
    <div>
      <h2>订单名称：{{ordersData.oname}}</h2>
      <h2>订单总价：{{ordersData.oprice}}</h2>
    </div>
    <div style="width: 400px;margin: 0 auto">

      <el-input
        placeholder="请输入主题：量大、美味、性价比高等"
        maxlength="32"
        v-model="oetitle"
        show-word-limit
        clearable>
      </el-input>
      <hr>
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入评价内容"
        v-model="oetext"
        maxlength="255"
        show-word-limit
        clearable>
      </el-input>
      <hr>
      <el-button @click="toSaveEvaluation()" type="primary">提交评价</el-button>
      <!--<el-button @click="notEvaluation()">残忍拒绝</el-button>-->
    </div>

  </div>

</template>

<script>
  import axios from 'axios';
    export default {
      name: "EvaluationPage",
      data() {
          return{
            titleMessage: '这是订单结算页面',
            ordersData: {
              oid:'',
              oname:'未知订单',
              oprice:0
            },
            oetitle: '',
            oetext: '',
          }
      },
      methods: {
        toSaveEvaluation(){
          var _this = this;
          axios.post(`/api/ordersEvalution/toSaveEvaluation/${_this.ordersData.oid}/${_this.oetitle}/${_this.oetext}`).then(function (res) {
            if (res.data == 'success') {
              _this.$message({
                message: '评价成功，感谢您的评价！',
                type: 'success'
              });
              _this.$router.push('/menuindex')
            } else {
              _this.$message({
                message: '抱歉，您的操作有误，请重新评价！',
                type: 'warning'
              });
            }
          })

        },
        notEvaluation(){
          this.$router.push('/menuindex')
        },
        getOrders(){
          var _this = this;
          axios.get('/api/ordersEvalution/getOrders').then(function (res) {
            _this.ordersData = res.data;
          })
        }
      },
      mounted() {
        this.getOrders()
      }
    }
</script>

<style scoped>

</style>
